<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 顶部 -->
        <div class="top">
          <el-form
            :model="form"
            ref="form"
            label-width="80px"
          >
            <el-row>
            <el-col :span="6">
            <el-form-item label="标签名称">
              <el-input v-model="form.tagName"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="13">
            <el-form-item label="状态">
              <el-select
                v-model="form.state"
                value-key=""
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="item in options"
                  :key="item.state"
                  :label="item.title"
                  :value="item.state"
                >
                </el-option>
              </el-select>
              <el-button @click="remove">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item></el-col>
            <el-col :span="5"><el-form-item>
              <el-button @click="goSubject" v-show="form.subjectID" type="text">返回学科</el-button
              >
              <el-button type="success" @click="addDirectory">新增目录</el-button>
            </el-form-item></el-col>
          </el-row>

          </el-form>
          <el-alert
            :title="`数据一共${counts}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table :data="tagList" style="width: 100%">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="180">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称" width="180">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{row}">
              {{formattingTime(row.createTime)}}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column label="状态">
            <template #default="{ row }">
              {{ row.state ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="{ row }">
              <el-button @click="changeStateById(row)" type="text">{{
                row.state ? '禁用' : '启用'
              }}</el-button>
              <el-button type="text" @click="changeDirector(row.id)"  :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button @click="delDirector(row.id)" type="text" :disabled="row.state === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="bottom">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="counts"
            :page-size="form.pagesize"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
        <!-- 弹层 -->
        <AddDirectoryDialog @change_dialog="changeDialog" :tagById="tagById" :id="form.id" :showAdd="showAdd" @close_dialog="closeDialog" />
      </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import { list as getdirectoryApi, remove, detail, changeState } from '@/api/hmmm/tags.js'
import AddDirectoryDialog from '../components/tags-add.vue'
export default {
  components: {
    AddDirectoryDialog
  },
  data () {
    return {
      form: {
        id: null, // 当前行id
        tagName: '', // 输入框
        state: null, // 下拉框
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        subjectID: this.$route.query.subjectID // 学科名称
      },
      options: [
        { title: '启用', state: 1 },
        { title: '禁用', state: 0 }
      ], // 下拉框选项
      showAdd: false, // 弹层显隐
      counts: 0, // 面试题总数
      tagList: [], // 目录列表
      tagById: {}, // 当前行目录内容
      state: null // 提交的状态

    }
  },
  created () {
    getCompanys()
    getQuestion()
    this.getdirectory()
  },
  methods: {
    // 增
    addDirectory () {
      this.form.id = null
      this.showAdd = true
    },
    // 查
    async getdirectory () {
      const res = await getdirectoryApi(this.form)
      console.log('返回得数据', res)
      this.tagList = res.data.items
      this.counts = res.data.counts
    },
    // 改
    async changeDirector (id) {
      this.form.id = id
      this.showAdd = true
      const res = await detail({ id: this.form.id })
      this.tagById = res.data
      // console.log(res)
    },
    // 删
    delDirector (id) {
      this.$confirm('此操作将永久删除该标签，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击确定执行的代码
        try {
          await remove({ id })
          this.$message.success('删除成功')
          this.getdirectory()
        } catch (error) {
          this.$message.error(error)
        }
      }).catch(() => {
        // 点击取消执行的代码
      })
    },
    // 关闭弹层
    closeDialog () {
      this.showAdd = false
    },
    // 重新获取列表
    changeDialog () {
      this.getdirectory()
    },
    // 返回学科
    goSubject () {
      this.$router.go(-1)
    },
    // 清除按钮
    remove () {
      this.form = {
        id: null,
        tagName: '',
        state: null,
        page: 1,
        pagesize: 10
      }
    },
    // 搜索按钮
    search () {
      this.getdirectory()
    },
    // 状态切换
    async changeStateById (row) {
      this.form.id = row.id
      if (row.state === 0) {
        this.state = 1
      } else {
        this.state = 0
      }
      try {
        await changeState({ ...this.form, state: this.state })
        this.$message.success('操作成功')
        this.form = {
          id: null,
          tagName: '',
          state: null,
          page: 1,
          pagesize: 10
        }
        this.getdirectory()
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 格式化时间
    formattingTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 分页器
    currentChange (page) {
      // console.log(page)
      this.form.page = page
      this.getdirectory()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .top {
  margin-bottom: 20px;
  .el-form-item {
    display: inline-block;
    .el-button {
      margin-left: 5px;
    }
    .el-input__inner {
      width: 200px;
    }
  }
}
.bottom {
  margin-top: 20px;
}
</style>
